window.page = new Swiper('.swiper-container', {
  effect: 'fade',
  hashnav: true,
  hashnavWatchState: true,
  autoHeight: true,
  onlyExternal: true,
  onInit: function(swiper) {
    $('#navbar .nav > li')
      .eq(swiper.activeIndex)
      .addClass('active')  
      .siblings()
      .removeClass('active')
  },
  onSlideChangeStart: function(swiper) {
    if (swiper.activeIndex === 1) {
      $('#brand-focus-title').addClass('animated bounceInUp')
      $('.brand-focus-info-item').each((index, item) => {
        $(item)
          .css({
            'animationDelay': .1 * index + 's'
          })
          .addClass('animated bounceInUp')
      })
        
    } else {
      $('#brand-focus-title').removeClass('animated bounceInUp')
      $('.brand-focus-info-item').removeClass('animated bounceInUp')
        
    }
  }
})


$(document).on('click', '.navbar-link', (e) => {
  e.preventDefault()

  let $el   = $(e.target),
      $p    = $el.parents('li'),
      i     = $p.index()

  page.slideTo(i)

  $p
    .addClass('active')  
    .siblings()
    .removeClass('active')

})

$('[id^=issue-]').on('shown.bs.collapse', function () {
  page.update()
})

$('[id^=issue-]').on('hidden.bs.collapse', function () {
  page.update()
})